<template>
  <div class="network_type">
    <el-tabs v-model="activeName" @tab-click="switchTabs">
      <el-tab-pane label="部门分类" name="type">
        <TypeCard ref="typeCard" />
      </el-tab-pane>
      <el-tab-pane label="工程师分类" name="empType">
        <TypeEmpCard ref="typeEmpCard" />
      </el-tab-pane>
      <el-tab-pane label="工程师等级" name="engineerGradeRef">
        <EngineerGrade ref="engineerGradeRef" />
      </el-tab-pane>
      <el-tab-pane label="工程师技能" name="engineerSkill">
        <EngineerSkill ref="engineerSkill" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
  import TypeCard from '../TypeCard/index.vue'
  import TypeEmpCard from '../TypeEmpCard/index.vue'
  import EngineerGrade from '../EngineerGrade/index.vue'
  import EngineerSkill from '../EngineerSkill/index.vue'
  import { onMounted, ref } from 'vue'
  import type { TabsPaneContext } from 'element-plus'

  const activeName = ref('type')
  const typeCard = ref<InstanceType<typeof TypeCard> | null>(null)
  const typeEmpCard = ref<InstanceType<typeof TypeEmpCard> | null>(null)
  const engineerGradeRef = ref<InstanceType<typeof EngineerGrade> | null>(null)
  const engineerSkill = ref<InstanceType<typeof EngineerSkill> | null>(null)
  // 导航切换
  const switchTabs = (tab: TabsPaneContext) => {
    activeName.value = tab.props.name as string
    getList()
  }

  // 获取客服列表
  const getTeamList = () => {
    typeCard.value.getList()
  }

  const getList = () => {
    switch (activeName.value) {
      case 'type':
        typeCard.value.getList()
        break
      case 'empType':
        typeEmpCard.value.getList()
        break
      case 'engineerGradeRef':
        engineerGradeRef.value.getList()
        break
      case 'engineerSkill':
        engineerSkill.value.getList()
        break
    }
  }

  onMounted(() => {
    getList()
  })

  defineExpose({ getTeamList })
</script>

<style scoped lang="scss">
  @import './NetworkType.scss';
</style>
